<template>
  <div class="scan_to_pay">
    <!-- <div class="header">
      <div class="left" @click="goback">
        <img src="@/assets/images/pubilc/btn_back.png" alt="">
      </div>
      <div class="title">扫码支付</div>
    </div>
    <div class="parce"></div> -->
    <div class="content">
      <div class="info">
        <div class="shopInfo">
          <img :src="order.avatar" alt="">
          <span>{{ order.goods_name }}</span>
        </div>
        <div class="pirce">
          <span>￥</span>
          <h3>{{ order.price }}</h3>
        </div>
        <div class="num">总数{{ order.buy_count }}件</div>
      </div>
      <div class="code">
        <div class="count_down" v-if="!timed">
          <img src="@/assets/images/pubilc/countDown.png" alt="">
          <span>支付倒计时：</span>
          <span>
            <van-count-down style="color: #FC4D43" :time="time" format="mm:ss"/>
          </span>
        </div>
        <div class="count_down" v-if="timed">
          <img src="@/assets/images/pubilc/ico_zhuyi  (2).png" alt="">
          <span>支付已超时</span>
        </div>
        <div class="codeImg">
          <div class="box" v-if="timed"></div>
          <img :src="pay.qrcode" alt="">
        </div>
        <div class="doc">
          <span v-if="type == 1">打开支付宝点击左上角“扫一扫”，扫描二维码完成支付</span>
          <span v-if="type == 2">打开微信点击右上角“扫一扫”，扫描二维码完成支付</span>
          <span v-if="type == 3">打开QQ点击右上角“扫一扫”，扫描二维码完成支付</span>
          <span v-if="type == 4">打开京东点击右上角“扫一扫”，扫描二维码完成支付</span>
          <!-- <span v-if="type == 5">打开京东点击右上角“扫一扫”，扫描二维码完成支付</span> -->
          <span v-if="type == 6">打开美团点击右上角“扫一扫”，扫描二维码完成支付</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { payType } from '@/api/index'
import { Toast } from 'vant'
export default {
  data () {
    return {
      time: 15 * 60 * 1000,
      pay: {},
      url: [],
      timer: null,
      timed: false,
      type: 0
    }
  },
  created () {
    this.pay = this.$cookies.get('order')
    this.order = this.pay.order
    this.time = this.order.pay_count_down * 1000
    this.url = this.order.pay_status_api
    this.type = this.$route.query.type
    this.getPayInfo(this.url)
    this.timer = setInterval(() => {
      this.getPayInfo(this.url)
    }, 3000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    getPayInfo (url) {
      payType(url).then(res => {
        if (res.code === 66000) {
          if (res.data.pay_status === 1) {
            // localStorage.setItem('detailUrl', res.data.h5_detail_api)
            Toast('支付成功')
            clearTimeout(this.timer)
            this.$cookies.remove('order')
            setTimeout(() => {
              this.$router.replace({path: '/orderDetails', query: {url: res.data.h5_detail_api}})
            }, 1500)
          } else {
            this.time = res.data.pay_count_down * 1000
          }
          if (this.time === 0) {
            Toast('支付超时')
            this.timed = true
            clearTimeout(this.timer)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.scan_to_pay {
  background: rgba(249,249,248,1);
  overflow-y: scroll;
  height: 100vh;
  // -webkit-overflow-scrolling: touch;
  font-family: PingFang SC;
}
.header {
  height: 45px;
  display: flex;
  align-items: center;
  position: relative;
  background: #ffffff;
  width: 100%;
  position: fixed;
  .left {
    height: 45px;
    width: 47px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    img {
      width: 17px;
      height: 17px;
    }
  }
  .title {
    width: 100%;
    text-align: center;
    color: #1E1E1E;
    font-size: 18px;
    font-weight: 800;
  }
}
.parce{
  height: 45px;
}
.content {
  padding: 10px 12px;
  text-align: center;
  .info {
    width: 100%;
    background: #ffffff;
    padding: 20px 50px;
    border-bottom: 0.5px solid rgba(245,245,245,1);
    .shopInfo {
      color: #666666;
      font-size: 14px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        border-radius: 50%;
      }
      span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .pirce {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      color: #2F2F2F;
      margin: 16px;
      span {
        font-size: 17px;
        font-weight: 600;
      }
      h3 {
        font-size: 36px;
        font-weight: 600;
        line-height: 36px;
      }
    }
    .num {
      color: #999999;
      font-size: 12px;
    }
  }
  .code {
    background: #ffffff;
    padding: 20px 50px;
    .count_down {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 12px;
        height: 12px;
        margin-right: 4px;
      }
    }
    .codeImg {
      margin: 20px auto;
      position: relative;
      height: 240px;
      width: 240px;
      .box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.9);
      }
      img {
        width: 240px;
        height: 240px;
      }
    }
    .doc {
      color: #999999;
      font-size: 10px;
      margin-bottom: 10px;
    }
  }

}
</style>